<template>
  <div class="permissions-page">
    <div class="page-header">
      <h1>权限管理</h1>
      <div class="actions">
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新增权限
        </el-button>
      </div>
    </div>

    <!-- 权限树 -->
    <div class="tree-container">
      <el-tree
        ref="treeRef"
        :data="permissionTree"
        :props="treeProps"
        node-key="id"
        show-checkbox
        :default-expand-all="true"
        :expand-on-click-node="false"
        v-loading="loading"
      >
        <template #default="{ node, data }">
          <span class="tree-node">
            <span class="node-label">
              <el-icon v-if="data.icon">
                <component :is="data.icon" />
              </el-icon>
              {{ node.label }}
            </span>
            <span class="node-code">{{ data.code }}</span>
            <span class="node-actions">
              <el-button size="small" type="text" @click="handleEdit(data)">
                编辑
              </el-button>
              <el-button size="small" type="text" @click="handleAddChild(data)">
                添加子权限
              </el-button>
              <el-button 
                size="small" 
                type="text" 
                style="color: #f56c6c"
                @click="handleDelete(data)"
                :disabled="data.children && data.children.length > 0"
              >
                删除
              </el-button>
            </span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const loading = ref(false)
const treeRef = ref()

// 树形控件属性配置
const treeProps = {
  children: 'children',
  label: 'name'
}

// 权限树数据
const permissionTree = ref([
  {
    id: 1,
    name: '工作台',
    code: 'dashboard',
    icon: 'DataBoard',
    children: [
      { id: 11, name: '查看工作台', code: 'dashboard:read' }
    ]
  },
  {
    id: 2,
    name: '栏目管理',
    code: 'category',
    icon: 'FolderOpened',
    children: [
      { id: 21, name: '查看栏目', code: 'category:read' },
      { id: 22, name: '创建栏目', code: 'category:create' },
      { id: 23, name: '编辑栏目', code: 'category:update' },
      { id: 24, name: '删除栏目', code: 'category:delete' }
    ]
  },
  {
    id: 3,
    name: '文章管理',
    code: 'article',
    icon: 'Document',
    children: [
      { id: 31, name: '查看文章', code: 'article:read' },
      { id: 32, name: '创建文章', code: 'article:create' },
      { id: 33, name: '编辑文章', code: 'article:update' },
      { id: 34, name: '删除文章', code: 'article:delete' },
      { id: 35, name: '发布文章', code: 'article:publish' }
    ]
  },
  {
    id: 4,
    name: '文件管理',
    code: 'file',
    icon: 'FolderOpened',
    children: [
      { id: 41, name: '查看文件', code: 'file:read' },
      { id: 42, name: '上传文件', code: 'file:upload' },
      { id: 43, name: '删除文件', code: 'file:delete' }
    ]
  },
  {
    id: 5,
    name: '系统管理',
    code: 'system',
    icon: 'Setting',
    children: [
      {
        id: 51,
        name: '用户管理',
        code: 'user',
        children: [
          { id: 511, name: '查看用户', code: 'user:read' },
          { id: 512, name: '创建用户', code: 'user:create' },
          { id: 513, name: '编辑用户', code: 'user:update' },
          { id: 514, name: '删除用户', code: 'user:delete' }
        ]
      },
      {
        id: 52,
        name: '角色管理',
        code: 'role',
        children: [
          { id: 521, name: '查看角色', code: 'role:read' },
          { id: 522, name: '创建角色', code: 'role:create' },
          { id: 523, name: '编辑角色', code: 'role:update' },
          { id: 524, name: '删除角色', code: 'role:delete' }
        ]
      },
      {
        id: 53,
        name: '权限管理',
        code: 'permission',
        children: [
          { id: 531, name: '查看权限', code: 'permission:read' },
          { id: 532, name: '创建权限', code: 'permission:create' },
          { id: 533, name: '编辑权限', code: 'permission:update' },
          { id: 534, name: '删除权限', code: 'permission:delete' }
        ]
      }
    ]
  },
  {
    id: 6,
    name: '系统设置',
    code: 'setting',
    icon: 'Tools',
    children: [
      { id: 61, name: '查看设置', code: 'setting:read' },
      { id: 62, name: '修改设置', code: 'setting:update' }
    ]
  },
  {
    id: 7,
    name: '操作日志',
    code: 'log',
    icon: 'Document',
    children: [
      { id: 71, name: '查看日志', code: 'log:read' },
      { id: 72, name: '删除日志', code: 'log:delete' }
    ]
  }
])

// 获取权限列表
const getPermissionList = async () => {
  loading.value = true
  try {
    // 模拟API调用
    setTimeout(() => {
      loading.value = false
    }, 500)
  } catch (error) {
    ElMessage.error('获取权限列表失败')
    loading.value = false
  }
}

// 新增权限
const handleAdd = () => {
  ElMessage.info('新增权限功能开发中')
}

// 编辑权限
const handleEdit = (data) => {
  ElMessage.info(`编辑权限: ${data.name}`)
}

// 添加子权限
const handleAddChild = (data) => {
  ElMessage.info(`为 "${data.name}" 添加子权限`)
}

// 删除权限
const handleDelete = async (data) => {
  if (data.children && data.children.length > 0) {
    ElMessage.warning('请先删除子权限')
    return
  }
  
  try {
    await ElMessageBox.confirm(`确认删除权限 "${data.name}" 吗？`, '危险操作', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    })
    
    ElMessage.success('删除成功')
  } catch {
    // 用户取消
  }
}

onMounted(() => {
  getPermissionList()
})
</script>

<style scoped>
.permissions-page {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.tree-container {
  margin-top: 20px;
}

.tree-node {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.node-label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.node-code {
  color: #999;
  font-size: 12px;
  margin-right: 20px;
}

.node-actions {
  opacity: 0;
  transition: opacity 0.3s;
}

.tree-node:hover .node-actions {
  opacity: 1;
}

:deep(.el-tree-node__content) {
  height: 40px;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f5f7fa;
}
</style>